<!-- 未使用setup语法糖 -->
<script lang="ts">
import { ref, reactive, computed } from "vue";
export default {
  props: {
    paramsNosetup: {
      type: String,
      required: true,
      default: "hello",
    },
  },
  setup() {
    const msg = ref(1);
    const obj = reactive({
      a: 2,
      b: 3,
    });
    const count = computed(() => {
      return msg.value + obj.b;
    });
    return {
      msg,
      obj,
      count,
    };
  },
};
</script>
<template>
  <h1>{{ count }}</h1>
  <h1>{{ obj.a }}</h1>

  <div class="card">
    <button type="button" @click="msg++">msg is {{ msg }}</button>
    <p>
      From parent
      <code>{{ paramsNosetup }}</code>
    </p>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
